<template>
  <div class="daiying_content">
    <div class="daiying_nav">
      <p>近期最受期待</p>
      <ul>
        <li v-for="item in navData.coming" :key="item.id">
          <div class="img_content">
            <img :src="item.img" />
            <div class="love_peach">
              <img src="../../../assets/爱心.png" />
            </div>
            <div class="zhezao">
              <span class="font_golden">{{ item.wish }}人想看</span>
            </div>
          </div>

          <div class="info_content">
            <p>{{ item.nm }}</p>
            <p>{{ item.comingTitle.split(" ")[0] }}</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="daiying_list">
      <ul>
        <li v-for="(item, index_) in newData" :key="index_ + '11'">
          <p>{{ item.title }}</p>
          <div
            class="content"
            v-for="(i, index) in item.datas"
            :key="index + '002' + index_"
          >
            <img :src="i.img" />
            <div class="movie_content">
              <div class="movie_info">
                <p class="title">
                  {{ i.nm
                  }}<span class="v2d" v-show="i.version.indexOf('v2d')!=-1"></span><span class="preshow" v-show="i.preShow"></span>
                </p>
                <p>
                  <span class="golden_font">{{ i.wish }}</span
                  >人想看
                </p>
                <p>主演:{{ i.star }}</p>
                <p>{{ i.rt }}上映</p>
              </div>
              <div class="btn_content">
                <button
                  v-if="
                    i.showStateButton == undefined ||
                    i.showStateButton.content != '预售'
                  "
                  class="red"
                >
                  想看
                </button>
                <button v-else class="blue">预售</button>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <mao-yan-aside></mao-yan-aside>
  </div>
</template>

<script>
// import axios from 'axios';
import MaoYanAside from "@/components/MaoYanAside.vue";
import daiying1 from "../../../assets/json/daiying1.json";
import daiying2 from "../../../assets/json/daiying2.json";
import axios from "axios";

export default {
  components: { MaoYanAside },
  name: "DaiYing",
  data() {
    return {
      data: {},
      navData: {},
      newData: [],
    };
  },
  created() {
    axios
      .get(
        "ajax/comingList?ci=30&limit=10&movieIds=&token=&optimus_uuid=EC840BF0533D11EC934BF7F85E54B5E26460D93951184003AD406C15B8110050&optimus_risk_level=71&optimus_code=10"
      )
      .then((data) => {
        console.log("daiying3:", data);
        if (data.data != "\n") {
          this.daiying2 = data.data;
        }

        this.navData = daiying1;
        this.data = daiying2;

        this.navData.coming.forEach((e) => {
          e.img = e.img.replace("w.h", "128.180"); //64*90
        });
        this.data.coming.forEach((e) => {
          e.img = e.img.replace("w.h", "128.180"); //64*90
        });
        console.log(
          "daiying1:",
          JSON.parse(JSON.stringify(this.navData.coming))
        );
        console.log("daiying2:", JSON.parse(JSON.stringify(this.data.coming)));
        //分组数据
        var objs = [];
        this.data.coming.forEach((a) => {
          let obj = {
            title: "" + a.comingTitle,
            datas: [],
          };
          let flag = true;
          //查找是否存在
          for (let i = 0; i < objs.length; i++) {
            if (objs[i].title == a.comingTitle) {
              //相等表示集合已存在，添加进去
              objs[i].datas.push(a);
              flag = false;
              break;
            }
          }
          //如果不存在，则作为新的加进去
          if (flag) {
            obj.datas.push(a);
            objs.push(obj);
          }
        });
        console.log(objs);
        this.newData = objs;
      });
  },
};
</script>

<style>
.daiying_content ul::-webkit-scrollbar {
  display: none;
}

.daiying_content .daiying_nav ul {
  display: flex;
  width: 100%;
  list-style: none;
  overflow: scroll;
}

.daiying_content .daiying_nav .font_golden {
  color: #faaf00;
  position: absolute;
  bottom: 0;
  font-weight: bold;
  display: inline-block;
  line-height: 0.5rem;
  width: 100%;
  text-align: center;
}

.daiying_content .love_peach {
  width: .8rem;
  height: .8rem;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-right-radius: 10px;
  background-color: rgba(0, 0, 0, 0.384);
}
.daiying_content .love_peach img {
  width: 10px;
}

.daiying_content .daiying_nav {
  padding: 15px 10px;
  width: 100%;
  box-sizing: border-box;
}

.daiying_content .daiying_nav ul li {
  margin: 15px 8px 15px 0px;
  width: 2.266667rem;
}

.daiying_content .daiying_nav ul li .img_content > img,
.daiying_content .daiying_nav .img_content {
  width: 2.266667rem;
  height: 3.066667rem;
  position: relative;
}

.daiying_content .zhezao {
  width: 2.266667rem;
  height: 3.066667rem;
  box-shadow: 0px -0.8rem 0.533333rem -0.266667rem #000 inset;
  position: absolute;
  top: 0;
  z-index: 2;
}
.daiying_content .daiying_nav {
  width: 100%;
  height: 6.133333rem;
  background-color: white;
}

.daiying_content .v2d {
  background-image: url("https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/hot-tab/img/base64/v2dimax.png");
  background-size: 100%;
  display: inline-block;
  vertical-align: middle;
  width: 1.066667rem;
  margin-left: .08rem;
  height: .533333rem;
  background-repeat: no-repeat;
}

.daiying_content .preshow {
  background-image: url("https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/hot-tab/img/base64/pre-show.png");
  background-size: 100%;
  display: inline-block;
  vertical-align: middle;
  width: .533333rem;
  height: .533333rem;
  margin-left: .08rem;
  background-repeat: no-repeat;
}

.daiying_content .daiying_nav > p {
  font-size: 0.373333rem;
}

.daiying_content .info_content {
  width: 100%;
}

.daiying_content .info_content p {
  color: #999;
}
.daiying_content .info_content p:first-of-type {
  color: #222;
  font-size: 0.346667rem;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  line-height: 0.7rem;
  text-overflow: ellipsis;
}

.daiying_list {
  width: 100%;
  margin-top: .266667rem;
  background-color: rgb(255, 255, 255);
}

.daiying_content .daiying_list ul {
  list-style: none;
  padding: .266667rem .266667rem;
  box-sizing: border-box;
}

.daiying_content .daiying_list ul > li {
  width: 100%;
  min-height: 3.946667rem;
  background-color: white;
  box-sizing: border-box;
  margin: .266667rem;
}

.daiying_content .daiying_list ul li > p {
  font-size: .373333rem;
  color: #333;
}

.daiying_content .daiying_list ul li .content {
  width: 100%;
  display: flex;
  height: 3.2rem;
  margin-bottom: .053333rem;
  align-items: center;
}

.daiying_content .daiying_list ul li .content > img {
  width: 1.706667rem;
  height: 2.4rem;
}

.daiying_content .daiying_list ul li .content .movie_content {
  flex: 1 1 auto;
  display: flex;
  height: 100%;
  border-bottom: 1px solid rgb(223, 223, 223);
}

.daiying_content .movie_info {
  flex: 1 1 auto;
  box-sizing: border-box;
  padding: 0px 10px;
  display: flex;
  height: 100%;
  align-content: center;
  flex-direction: column;
}

.daiying_content .movie_info p {
  font-size: .346667rem;
  color: #333;
  overflow: hidden;
  width: 5rem;
  text-overflow: ellipsis;
  line-height: 0.5rem;
  white-space: nowrap;
  display: inline-block;
}

.daiying_content .movie_info .golden_font {
  font-size: .453333rem;
  font-weight: bold;
  color: #faaf00;
}
.daiying_content .movie_info .title {
  font-size: 0.453333rem;
  font-weight: bold;
  margin-top: 0.4rem;
  margin-bottom: 0.266667rem;
}
.daiying_content .btn_content {
  width: 2.133333rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.daiying_content .btn_content > button {
  border: 0px;
  width: 1.466667rem;
  color: white;
  font-size: .346667rem;
  height: .8rem;
  border-radius: .533333rem;
}

.daiying_content .red {
  background-color: #faaf00;
}
.daiying_content .blue {
  background-color: #3c9fe6;
}
</style>